//body {
//  background: #fafafa;
//}
@import "devices";
@import "markdown";
.syui-demo-page {
  width: 100%;
  display: flex;
  .syui-usage {
    flex: 1;
    padding: 5Px;
    overflow: auto;
    background: #fff;
    display: none;

    * {
      user-select: text;
    }

    @include desktop-device {
      display: block;
    }

    p, blockquote, ul, ol, dl, table, pre {
      margin: 5Px 0;
    }

    blockquote {
      border-left: 2Px solid #ddd;
      padding: 0 12Px;
      color: #777;
      &>:first-child {
        margin-top: 0;
      }
      &>:last-child {
        margin-bottom: 0;
      }
    }

    pre {
      max-width: 100%;
      background: #eee;
      margin: 3Px;
      padding: 3Px;
      overflow: auto;

      code {
        color: #666;
      }
    }

    code {
      color: #961;
      background: #eee;
    }

    blockquote {
      p {
        background: #f2f3f1;
      }
    }
  }
  #syui-container {
    margin-left: 10Px;
    //background: antiquewhite;
    //border: 2Px solid #000;
  }
}
